<template>
  <div class="port">
    <div class="ppgg">
      <div><router-link to="/one/sp" class="aagd">上一页</router-link></div>
      <span><router-link to="/one/sp" class="aadc">1</router-link></span>
      <span><router-link to="/two/sp" class="aadd">2</router-link></span>
      <div><router-link to="/two/sp" class="aagg">下一页</router-link></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.port{
  height: 1000px;
  width: 850px;
  margin: auto;
}
.ppgg {
  display: flex;
  height: 50px;
  width: 280px;
  margin: 20px 0 0 0;
}
.aadc {
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 10px 0 20px;
  border: 1px solid #EAE6E3;
}
.aadc:hover {
  color: white;
  background-color: #FA7E3E;
  border: 1px solid #FA7E3E;
}
.aadd {
  text-decoration: none;
  padding: 5px 10px;
    margin: 0 20px 0 10px;
  border: 1px solid #EAE6E3;
}
.aadd:hover {
  color: white;
  background-color: #FA7E3E;
  border: 1px solid #FA7E3E;
}
.aagd {
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #EAE6E3;
  /* background-color: orange; */
}
.aagd:hover {
  color: white;
  background-color: #FA7E3E;
  border: 1px solid #FA7E3E;
}
.aagg {
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #FA7E3E;
  color: white;
  background-color: #FA7E3E;
}
</style>
